<template>
  <div class="layout-all">

      <div class="layout-header flex_row" style="float:left">
        <el-input
        style="padding-left: 10px;"
          placeholder="请输入标题"
          v-model="title"
          clearable>
        </el-input>
         <el-input
         style="padding-left: 10px;"
          placeholder="请输入内容"
          type="textarea"
          rows="1"
          v-model="content"
          clearable>
        </el-input>
        <el-select v-model="value" placeholder="请选择" style="padding-left: 10px;">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>

          <el-button
            @click="send"
            type="primary"
            icon="el-icon-plus"
            style="margin-left:10px"
          >发送新消息</el-button>
      </div>
        <el-table
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%;margin-top:10px"
      >
      <el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
        <el-table-column align="center" prop="title" label="标题" />
        <el-table-column align="center" prop="content" label="内容"/>
        <el-table-column align="center" prop="is_read" label="是否已读" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.is_read === 1 ? 'primary' : 'success'"
              size="mini"
            >{{ scope.row.is_read === 1 ? "是" : "否" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="发送时间" />
        <el-table-column
          align="center"
          prop="telephone"
          fixed="right"
          width="100"
          label="操作"
        >
        <template slot-scope="scope">
        <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="onDel(scope.row.id)"
            />
            </template>
        </el-table-column>
      </el-table>

    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  props:['user_id','nickname'],
  name:'messageLog',
  data() {
    return {
      value: -1,
      title: "",
      content: "",
      brokerage: "",
      searchWhere: {
        title: "",
        status:'',
      },
      tableData: [],
      options: [],
      total: 0,
      current_page: 1,
      per_page: 14,
    };
  },
  onShow(){

  },
  mounted() {
    this.onSearch();
  },
  methods: {
        //分佣查询
    statusOptChange (status) {
      this.searchWhere.status = status
      this.onSearch()
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch() {
      const form = {};
      form.user_id = this.user_id
      form.page = this.current_page;
      this.get("/admin/User/get_message_log", form, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
        this.options=e.level
        this.options.unshift({'id':0,'title':'全部'})
        this.options.unshift({'id':-1,'title':this.nickname})
      });
    },
    onDel(id){
      this.get("/admin/User/del_message", {id:id}, "POST").then((e) => {
        this.onSearch()
      });
    },
    send(){
      const form = {};
      form.user_id = this.user_id
      form.title = this.title;
      form.content = this.content;
      form.value = this.value;
      if(form.title==""){
        this.$msg_ok('error','请输入标题')
        return
      }
      if(form.content==""){
        this.$msg_ok('error','请输入内容')
        return
      }
      this.get("/admin/User/create_message", form, "POST").then((e) => {
        this.title=''
        this.content=''
        this.onSearch()
      });
    },
  },
};
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.flex_row {
  display: flex;
  align-items: center;
}

.flex_start {
  justify-content: flex-start;
}
</style>>
